<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" name="viewport">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" href="css/global.css" />
    <link rel="stylesheet" href="css/main.css" />
    <title>选择险种</title>
</head>

<body>
    <div class="all_top">
        <div class="all_top_main">
            <a href="javascript:history.go(-1);" class="all_top_back"></a>
            <p class="all_top_tit t_c">选择险种</p>
            <a href="insurance_intro.html" class="all_top_btn">险种介绍</a>
        </div>
    </div>
    <div class="select">
        <div class="select_top box">
            <div class="box_flex1 on">主流</div>
            <div class="box_flex1">全面</div>
            <div class="box_flex1">基本</div>
            <div class="box_flex1">自定义</div>
        </div>

        <p class="select_tit">基本险</p>
        <ul class="flex">
            <li class="select_li">
                <label for="type1" class="select_checkbox">车辆损失险</label>
                <input type="checkbox" class="hide" id="type1" />
            </li>
            <li class="select_li">
                <label for="type2" class="select_checkbox">车辆损失险</label>
                <input type="checkbox" class="hide" id="type2" />
            </li>
            <li class="select_li">
                <label for="type3" class="select_checkbox">车辆损失险</label>
                <input type="checkbox" class="hide" id="type3" />
            </li>
        </ul>


        <div class="operate_select clear">

            <!-- <div class="operate_div">
				<span class="hide checkbox_id"></span>存储上面所点击的车险对应的input-checkbox的id值
				<span class="can_change_btn">涉水险</span>
				<span class="select_money">3万</span>
			</div>
			<div class="operate_div">
				<span class="hide checkbox_id"></span>存储上面所点击的车险对应的input-checkbox的id值
				<span class="can_change_btn">涉水险</span>
				<span class="select_money">3万</span>
			</div>-->
			<div class="operate_div">
				<span class="hide checkbox_id"></span><!-- 交强险等自动添加不可操作更改，存储上面所点击的车险对应的input-checkbox的id值 -->
				<span class="canot_change_btn">涉水险</span>
				<span class="select_money">3万</span>
			</div> 
        </div>

        <div class="box select_bottom">
        	<div class="box_flex1 select_all_money">
        		￥35000
        	</div>
        	<a href="confirm_buy.html" class="select_btn">下一步</a>
        </div>


    </div>
    <div class="body_cover">
        <div class="body_detail">
            <div class="body_btn box">
                <span class="hide checkbox_id"></span>
                <!-- 存储上面所点击的车险对应的input-checkbox的id值 -->
                <span class="hide checkbox_name"></span>
                <!-- 存储上面所点击的车险对应名字 -->
                <div class="box_flex1 t_l">
                    <a href="javascript:void(0);" class="cancel_btn">
						取消
					</a>
                </div>
                <div class="box_flex1 t_r">
                    <a href="javascript:void(0);" class="confirm_btn" id="confirm_btn">
						确认
					</a>
                </div>
            </div>
            <!-- ajax动态创建写入数据 start -->
            <p class="body_cover_tit">赔付额度</p>
            <ul class="body_cover_ul">
                <li class="body_cover_li">
                    5万
                </li>
                <li class="body_cover_li">
                    10万
                </li>
                <li class="body_cover_li">
                    15万
                </li>
            </ul>
            <!-- end -->
        </div>
    </div>
</body>

</html>
<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/public.js"></script>
<script type="text/javascript" src="js/jquery.validate.min.js"></script>
<script type="text/javascript" src="js/jquery-validate-methods.js"></script>
<script type="text/javascript">
$(document).ready(function() {
    // 页面刷新后清除浏览器默认记住的表单选项
    $("input[type='checkbox']").prop("checked", false);
    // 顶部导航栏
    $(".select_top>.box_flex1").on("click", function() {
        $(this).siblings().removeClass("on").end().addClass("on");
    });
    // 选择车险的checkbox按钮
    $(document).delegate(".select_checkbox", "click", function() {
        var checkboxId = $(this).next().attr("id");
        var checkboxName = $(this).html();
        // 将车险名字和id写进弹窗里
        $(".body_cover").find(".checkbox_id").html(checkboxId);
        $(".body_cover").find(".checkbox_name").html(checkboxName);

        // 这里执行ajax操作获取险种的具体金额等
        /*$.ajax({

        })*/

        openBottomDiv();
    });

    // 删除已选车险
    $(".operate_select").delegate(".can_change_btn", "click", function() {
        // console.log("!2");
        var checkboxId = $(this).prev().html();
        $("#" + checkboxId).prev().removeClass("on");
        $(this).parent().remove();
    });


    // 确定按钮
    $("#confirm_btn").on("click", function() {
        var html = "";
        var checkboxId = $(".body_cover").find(".checkbox_id").html();
        var checkboxName = $(".body_cover").find(".checkbox_name").html();
        var allMoney = $(".body_cover_li.on").html();
        if (!$(".body_cover_ul").hasClass("has_click")) {
            openWarningBox("请选择额度");
        } else {
            $(".operate_select>.operate_div").each(function() {
                console.log($(this).children(".checkbox_id").html());
                if ($(this).children(".checkbox_id").html() == checkboxId) {
                    $(this).remove();
                }
            });
            html += '<div class="operate_div">';
            html += '<span class="hide checkbox_id">' + checkboxId + '</span>';
            html += '<span class="can_change_btn">' + checkboxName + '</span>';
            html += '<span class="select_money">' + allMoney + '</span>';
            html += '</div>';
            $(".operate_select").append(html);
            closeBottomDiv();
            $("#" + checkboxId).prev().addClass("on");

        }
    });
    // 选择车险保额
    $(".body_cover_ul").delegate(".body_cover_li", "click", function() {
        $(".body_cover_ul").addClass("has_click");
        $(this).siblings().removeClass("on").end().addClass("on");
    });

});
</script>
